<template>
  <div>
    <h1>表格</h1>
    <div>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="审批人">
          <el-input v-model="formInline.user" placeholder="审批人" clearable />
        </el-form-item>
        <el-form-item label="活动区域">
          <el-select v-model="formInline.region" placeholder="活动区域">
            <el-option label="区域一" value="shanghai" />
            <el-option label="区域二" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="add">添加新用户</el-button>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="tab">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        stripe
        border
        show-summary
        sum-text="合计"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column label="日期">
          <template slot-scope="scope">{{ scope.row.date }}</template>
        </el-table-column>
        <el-table-column prop="name" label="姓名" />
        <el-table-column prop="id" label="id" />
        <el-table-column prop="address" label="地址" show-overflow-tooltip />
        <el-table-column prop="address" label="操作" width="330">
          <template slot-scope="{ row }">
            <el-button type="primary" size="mini" @click="jichupz(row)">基础配置</el-button>
            <el-button type="primary" size="mini" @click="tongbu(row)">同步</el-button>
            <el-button type="primary" size="mini" @click="showEditDialog(row)">修改</el-button>
            <el-button type="primary" size="mini" @click="del(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 20px">
        <el-button
          type="primary"
          @click="toggleSelection([tableData[1], tableData[2]])"
        >切换第二、第三行的选中状态</el-button>
        <el-button type="warning" @click="toggleSelection()">取消选择</el-button>
        <el-button type="primary" @click="tongbu">同步</el-button>
      </div>
      <div class="tag">
        <el-tag v-for="tag in dynamicTags" :key="tag" closable :disable-transitions="false" @close="tagClose(tag)">
          {{ tag }}
        </el-tag>
      </div>

      <!-- 时间选择 -->
    </div>
    <!-- 添加用户弹框 -->
    <el-dialog title="添加用户" :visible.sync="dialogVisible" width="45%" @close="handleClose">
      <el-form
        ref="addFormRef"
        :inline="true"
        :model="addForm"
        :rules="addFormRules"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="姓名" prop="name">
          <el-input v-model="addForm.name" />
        </el-form-item>
        <el-form-item label="日期" prop="date">
          <el-date-picker
            v-model="addForm.date"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM -dd"
            :picker-options="pickerOptions"
          />
        </el-form-item>
        <el-form-item label="地址" prop=" address">
          <el-input v-model="addForm.address" />
        </el-form-item>
        <!-- <el-form-item label="id" prop="id">
          <el-input v-model="addForm.id" />
        </el-form-item> -->
        <!-- <el-form-item label="密码" prop="passWord">
          <el-input v-model="addForm.passWord" />
        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
          <el-input v-model="addForm.mobile" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="addForm.email" />
        </el-form-item> -->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="addFormClick">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 日期 -->
    <div class="time">
      <div class="block">
        <span class="demonstration">默认111</span>
        <el-date-picker v-model="value1" type="date" :picker-options="pickerOptions" placeholder="选择日期" />
      </div>
      <div class="container">
        <div class="block">
          <span class="demonstration">年-月-日</span>
          <el-date-picker
            v-model="value2"
            type="date"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            placeholder="年-月-日"
            :picker-options="pickerOptions"
          />
        </div>
      </div>
      <div class="container">
        <div class="block">
          <span class="demonstration">月</span>
          <el-date-picker
            v-model="value2"
            :picker-options="pickerOptions"
            type="month"
            value-format="yyyy-MM"
            format="yyyy-MM"
            placeholder="选择月"
          />
        </div>
      </div>
      <div class="container">
        <div class="block">
          <span class="demonstration">年</span>
          <el-date-picker
            v-model="value3"
            type="year"
            value-format="yyyy"
            format="yyyy"
            placeholder="选择年"
            :picker-options="pickerOptions"
            @change="gitYear(value3)"
          />
        </div>
        <div class="block">
          <span class="demonstration">多个日期</span>
          <el-date-picker v-model="value4" type="dates" placeholder="选择一个或多个日期" />
        </div>
      </div>
    </div>
    <!-- 日期 -->
    <!-- 编辑弹框 -->
    <Edit :edit-dialog-visible="editDialogVisible" :edit-form="editForm" @closeEdit="closeEdit" />
    <!-- 基础信息弹框 -->
  </div>
</template>

<script>
import Edit from '@/views/tableTo/component/Edit.vue'
const tableData = [
  {
    date: '2016-05-03',
    name: '王小虎',
    id: '1',
    address: '上海市普陀区金沙江路 1518 弄'
  },
  {
    date: '2016-05-06',
    name: '王小虎',
    id: '2',
    address: '上海市普陀区金沙江路 1518 弄'
  },
  {
    date: '2016-05-07',
    name: '王小虎',
    id: '3',
    address: '上海市普陀区金沙江路 1518 弄'
  },
  {
    date: '2016-05-07',
    name: '王小虎',
    id: '4',
    address: '上海市普陀区金沙江路 1518 弄'
  }
]
export default {
  name: 'VueAdminTemplateMasterTableto',
  components: {
    Edit // 编辑弹框
  },

  data() {
    // 验证邮箱的校验规则
    // rule,验证规则 value,待验证的值  cb回调函数
    var checkEmail = (rule, value, cb) => {
      // 验证邮箱的正则表达式
      const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
      if (regEmail.test(value)) {
        // 合法的邮箱
        return cb()
      }
      // 非法的邮箱 new 一个错误信息
      cb(new Error('请输入合法的邮箱'))
    }
    // 验证手机号的校验规则
    var checkMobile = (rule, value, cb) => {
      // 验证手机号的正则表达式
      const regMobile = /^(0|86|17951)?(13[0-9]|15[0123456789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
      if (regMobile.test(value)) {
        // 合法的手机号
        return cb()
      }
      // 非法的手机号
      cb(new Error('请输入合法的手机号'))
    }
    return {
      value1: '',
      value2: '',
      value3: '',
      value4: '',
      // pickerOptions: {
      //   disabledDate(time) {
      //     return time.getTime() > Date.now();
      //   },
      // }, // 当前日期之后不可选
      // 禁止选择以后的时间
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      },
      dynamicTags: ['标签一', '标签二', '标签三'],
      addForm: {
        name: '',
        passWord: '',
        mobile: '',
        email: '',
        address: '',
        date: ''
      },
      addFormRules: {
        name: [
          { required: true, message: '请输入用户名称', trigger: 'blur' },
          { min: 2, max: 18, message: '长度在 2到 18 个字符', trigger: 'blur' }
        ],
        passWord: [
          { required: true, message: '请输入用户密码', trigger: 'blur' },
          { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { validator: checkMobile, trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { validator: checkEmail, trigger: 'blur' }
        ]
      },
      formInline: {
        user: '',
        region: ''
      },
      tableData: JSON.parse(localStorage.getItem('list')) || tableData,
      multipleSelection: [], // 复选框
      dialogVisible: false, // 添加的显示和隐藏
      editDialogVisible: false, // 修改框的显示和隐藏
      jcDialogVisible: false, // 基础配置框的显示和隐藏
      editForm: {} // 修改框的回显数据
    }
  },
  watch: {
    // 本地持久化
    tableData: {
      deep: true, // 深度监听
      handler(newVal) {
        // this.tableData
        localStorage.setItem('list', JSON.stringify(newVal))
      }
    }
  },

  mounted() {},

  methods: {
    // 多个 日期
    gitYear(a) {
      console.log(this.value3)
      console.log(a)
    },
    // 删除
    del(id) {
      this.$confirm('此操作将永久删除该项目，是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then((res) => {
          // 点击确定时 调接口 传参id传给后台 让后台删除
          // filter把tableData中不为当前点击的id的项都筛选出来  然后再赋值给tableData
          this.tableData = this.tableData.filter((item) => item.id != id) // 手动删除
          this.$message.success('删除成功')
        })
        .catch((err) => {
          console.log(err)
          this.$message.error('取消删除')
        })
    },
    // tag  移除tag事件
    tagClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
      console.log(tag)
    },
    // jichupz基础配置
    jichupz() {},
    // 展示修改弹框
    showEditDialog(val) {
      this.editForm = val
      console.log(val)
      this.editDialogVisible = true
    },
    // 关闭弹框
    closeEdit() {
      this.editDialogVisible = false
    },
    // 点击添加用户按钮  弹出弹框
    add() {
      this.dialogVisible = true
    },
    // 点击确定 添加新用户
    addFormClick() {
      // alert('添加新用户接口');
      this.$refs.addFormRef.validate((valid) => {
        console.log(valid)
        // if 判断如果失败了 return出去
        if (!valid) return
        //  没有return 验证成功
        // 可以发起请求调用添加的接口
        // alert('添加新用户接口');
      })
      // 手动添加数据
      this.tableData.unshift({
        date: this.addForm.date,
        name: this.addForm.name,
        id: +new Date(),
        address: this.addForm.address
      })
      this.dialogVisible = false
    },
    // 监听关闭表单的事件
    handleClose() {
      this.dialogVisible = false
      // 手动清空数据1
      // (this.addForm = {
      //   name: '',
      //   passWord: '',
      //   mobile: '',
      //   email: '',
      // }),
      // 清空数据2
      this.$refs.addFormRef.resetFields()
    },
    // 搜索按钮
    onSubmit() {
      console.log('submit!')
    },
    // 复选框
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    tongbu() {
      // 打印点击的 复选框
      console.log(this.$refs.multipleTable.selection)
      let Arr = []
      Arr = this.$refs.multipleTable.selection.map((item) => {
        return {
          id: item.id
        }
      })
      if (Arr.length > 0) {
        // 调接口
        alert('ok调接口')
      } else {
        this.$message.error('请至少选择一个项目')
      }
    }
  }
}
</script>

<style scoped lang="scss">
.tab {
  width: 100%;
  height: 100%;
  text-align: left;
  text-align: center;
  // border: 1px solid red;
  // background-color: pink;
}
::v-deep {
  .el-table {
    width: 900px;
    height: 450px;
    overflow: auto;
    // text-align: center;
    margin-left: 100px;
  }
  .app-main[data-v-078753dd] {
    background-color: #163e79;
  }
}
</style>
